<template>
  <div v-for="(i, k) in files" :key="k" class="flex items-center file-list-item py-[4px]">
    <div class="flex items-center w-full" @click="onClick(i)">
      <FileIcon :fileName="i.name" :icon="i.icon" />

      <div class="ml-[6px] flex-1 min-w-0">
        <span class="text-[#646A73FF] text-[12px] block truncate" :title="i.name">
          {{ i.name }}
        </span>
        <div class="text-[#A6A6A6] text-[10px] mt-[2px]">
          {{ i.time?.substring(0, 16) }}
        </div>
      </div>

      <i-icon
        v-if="i.type !== 'FOLDER'"
        icon="mdi:download"
        class="ml-[8px] text-[18px] text-[#409EFF] cursor-pointer shrink-0"
        @click.stop="onDownload(i, $event)"
      />
    </div>
  </div>

  <p v-if="files.length < 1" class="text-[#646A73] text-[11px] text-center">
    {{ t('detail.noData') }}
  </p>

  <!-- 下载确认弹窗 -->
  <van-dialog
    v-model:show="showDialog"
    show-cancel-button
    :confirm-button-text="t('confirm')"
    :cancel-button-text="t('cancel')"
    :close-on-click-overlay="false"
  >
    <template #default>
      <div class="px-4 pt-3 pb-4">
        <div class="text-[16px] font-semibold text-[#333] mb-3">
          {{ t('detail.sendFileToEmail') }}
        </div>
        <div class="border-b border-[#eee] mb-3"></div>
        <input
          v-model="email"
          type="email"
          :placeholder="t('detail.placeHolderEmail')"
          class="w-full border border-gray-300 rounded px-3 py-2 text-sm"
        />
      </div>
    </template>

    <template #footer>
      <div class="flex justify-end gap-3 px-4 pb-3">
        <!-- 取消按钮，文字颜色用 var(--color-main) -->
        <van-button type="default" size="small" @click="cancelDialog">
          {{ t('cancel') }}
        </van-button>

        <!-- 确认按钮，文字颜色用 var(--color-main) -->
        <van-button
          type="default"
          size="small"
          style="color: var(--color-main); border-color: var(--color-main)"
          @click="confirmDialog"
        >
          {{ t('confirm') }}
        </van-button>
      </div>
    </template>
  </van-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/store/modules/user-info';
import { useI18n } from 'vue-i18n';
import FileIcon from '@/components/file-icon/index.vue';
import { showToast } from 'vant';
import { sendFileToEmail } from '@/api/file';

defineProps<{
  files: any[];
  onClick: (file: any) => void;
}>();

const { t } = useI18n();
const showDialog = ref(false);
const currentFile = ref<any>(null);
const email = ref('');

const userStore = useUserStore();

// 下载按钮点击
function onDownload(file: any, e: Event) {
  e.stopPropagation();
  currentFile.value = file;
  email.value = userStore.userInfo.email || ''; // 默认填充用户邮箱
  showDialog.value = true;
}

// 邮箱格式校验
function validateEmail(email: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function cancelDialog() {
  showDialog.value = false;
  email.value = '';
  currentFile.value = null;
}

async function confirmDialog() {
  if (!validateEmail(email.value)) {
    showToast(t('detail.invalidEmail'));
    return;
  }

  try {
    await sendFileToEmail({
      downloadUrl: currentFile.value.url,
      fileName: currentFile.value.name,
      email: email.value,
    });
    showToast(t('detail.sendSuccess'));
    cancelDialog(); // 发送成功后关闭弹窗并清空状态
  } catch (err) {
    console.error('❌ 邮件发送失败', err);
    showToast(t('detail.sendFail'));
  }
}
</script>
